import type { ReactNode } from 'react';
import React, { useState } from 'react';

export interface IFillText {
  login: boolean
  loading: boolean
  loadingText: string
  content: ReactNode | undefined
  config: {
    [key: string]: any
  }
  setLoadingText: (text: string) => void
  setLoading: (loading: boolean) => void
  setConfig: (config: any) => void
  setContent: (content: ReactNode | undefined) => void
  onLogin: () => void
  onLogout: () => void
}

export const FillContext = React.createContext<IFillText>({
  login: false,
  loading: false,
  loadingText: '',
  content: <></>,
  config: {},
  setLoadingText: () => {},
  setLoading: () => {},
  setConfig: () => {},
  setContent: () => {},
  onLogin: () => {},
  onLogout: () => {},
});

export const FillContextProvider = (props: any) => {
  const [login, setLogin] = useState(false);
  const [content, setContent] = useState<ReactNode | undefined>(undefined);
  const [config, setConfig] = useState({});
  const [loading, setLoading] = useState(false);
  const [loadingText, setLoadingText] = useState('加载中');
  const contextValue: IFillText = {
    login,
    content,
    config,
    loading,
    loadingText,
    setLoadingText: (text) => {
      setLoadingText(text);
    },
    setLoading: (loading) => {
      setLoading(loading);
    },
    setConfig: (config) => {
      setConfig(config);
    },
    setContent: (content) => {
      setContent(content);
    },
    onLogin: () => {
      setLogin(true);
    },
    onLogout: () => {
      setLogin(false);
    },
  };

  return (
    <FillContext.Provider value={contextValue}>
      {props.children}
    </FillContext.Provider>
  );
};
